<template>
    <div id="map-dom-senior"></div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from "vue";
// 引入 leaflet 样式
import 'leaflet/dist/leaflet.css'
// 引入 leaflet js 文件 需要现在env.d.ts中主动声明
import L from "leaflet";
// 先声明leaflet里的一些对象类型，不然ts在后续赋值时会提示类型不对。
interface LeafletDom {
    // map对象
    mapDom: any,
    // 任意属性
    [propName: string]: any;
}

const data: LeafletDom = reactive({
    // map对象
    mapDom: null,
});

onMounted(() => {
    // 初始化地图 
    // 如果直接写在外面，因为setup相当于beforeCreate和created，所以会报错，获取不到map容器
    initMap();
})

// 初始化地图
const initMap = (): void => {
    // 获取map对象 参数：地理中心和缩放
    data.mapDom = L.map("map-dom-senior").setView([30.508383, 114.393644], 16);
    // 多个地图切换
    const baseLayers = {
        "黑白色": L.tileLayer(
            "https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}{r}.png",
            {
                maxZoom: 18,
            }
        ),
        "蓝黄色": L.tileLayer(
            "https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg",
            {
                maxZoom: 18,
            }
        ),
        "正常地图": L.tileLayer(
            "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            {
                maxZoom: 18,
            }
        ).addTo(data.mapDom),
    };
    // 创建一个具有给定图层的图层控件。基本图层将用单选按钮切换，而覆盖物图层将用复选框切换。
    // 注意，所有的基本图层都应该在基本图层对象中传递，但在地图实例化过程中，只有一个图层应该被添加到地图中。
    // https://leafletjs.cn/reference-1.8.0.html#control-layers
    let layerControl = L.control
        .layers(
            // 基本图层
            baseLayers,
            // 覆盖物图层
            {},
            // 选项对象
            {
                // 控件的位置（地图的一个角）。可能的值是 'topleft'、 'topright'、 'bottomleft' 或 'bottomright'
                position: "topleft",
                // 如果为 true, 该控件将被折叠成一个图标，并在鼠标悬停或触摸时展开。
                collapsed: true,
            }
        )
        .addTo(data.mapDom);
}
</script>

<style lang="less" scoped>
#map-dom-senior {
    width: 100%;
    height: 100%;
}

.leaflet-container {
    font-size: 12px !important;
}
</style>